<template>
	<view class="page">
		<!-- 表单区 -->
		<view class="form">
			<view class="row">
				<text class="label">商品名称</text>
				<input class="input" v-model="form.name" placeholder="请输入" />
			</view>

			<view class="row">
				<text class="label">商品分类</text>
				<picker class="input" @change="pickCategory" :value="categoryIndex" :range="categories">
					<view>{{categories[categoryIndex] || '请选择'}}</view>
				</picker>
			</view>

			<view class="row">
				<text class="label">商品图片</text>
				<view class="img-box" @click="chooseImg">
					<image v-if="form.img" :src="form.img" class="img" mode="aspectFill" />
					<text v-else class="img-txt">选择文件</text>
				</view>
			</view>

			<view class="row">
				<text class="label">规格</text>
				<switch :checked="form.multiSpec" @change="form.multiSpec = $event.detail.value" />
				<text class="spec-txt">{{form.multiSpec ? '启用多规格' : '单规格'}}</text>
			</view>

			<view class="row">
				<text class="label">商品价格</text>
				<input class="input" v-model="form.price" type="digit" placeholder="请输入" />
			</view>

			<view class="row">
				<text class="label">商品库存</text>
				<input class="input" v-model="form.stock" type="number" placeholder="请输入" />
			</view>
		</view>

		<!-- 脱离文本流的按钮 -->
		<view class="btn-fixed" @click="submit">确认添加</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { goodAdd} from '@/api/goodAdd'
	import {productDetail , editProduct } from '@/api/goods'
	
	
	/* ---------- 表单初始值 ---------- */
	const form = ref({
	  id: null,          // 商品主键
	  name: '',
	  price: '',
	  stock: '',
	  img: '',
	  category: '',
	  multiSpec: false
	})
	const categoryIndex = ref(0)
	const categories = ['上衣', '裤装', '外套']
	const gotId =ref()
	

	
	/* ---------- 拉详情 ---------- */
	async function detail(id) {
	  try {
	    const res = await productDetail({ productId:id })          // 返回 { data: {id,name,price,stock,img,category} }
	    form.value.name = res.data.productName
		form.value.price = res.data.price
		form.value.stock = res.data.inventory
		form.value.img = res.data.productImage
		categories.value = res.data.category
	   //这里把商品详情接口返回的数据渲染到form中，目前没数据所以先不渲染
	  } catch (e) {
	    uni.showToast({ title: '获取详情失败', icon: 'none' })
	  }
	}
	
	/* ---------- 选图 ---------- */
	const chooseImg = () => {
	  uni.chooseImage({
	    count: 1,
	    success: (res) => (form.value.img = res.tempFilePaths[0])
	  })
	}
	
	/* ---------- 提交 ---------- */
	const submit = async () => {
	  const priceNum = Number(form.value.price)
	  const stockNum = Number(form.value.stock)
	  // if (isNaN(priceNum) || isNaN(stockNum)) {
	  //   uni.showToast({ title: '价格或库存必须是数字', icon: 'none' })
	  //   return
	  // }
	
	  const data = {
	    productName: form.value.name,
	    price: priceNum,
	    inventory: stockNum,
	    // productImage: form.value.img || 'aaa',
		productImage:'aaa',
	    category: categories[categoryIndex.value],
	    shopId: 1,
	  }
	  const data2 = {
	    productName: form.value.name,
	    price: priceNum,
	    inventory: stockNum,
		productId: gotId.value,
	  		productImage:'aaa',
	    category: categories[categoryIndex.value],
	    shopId: 1,
	  }
	
	  try {
		  console.log("有没有gotId:",gotId.value? true :false)
	    if (gotId.value) {
	      // 编辑
	      await editProduct(data2)
	      uni.showToast({ title: '更新成功', icon: 'success' })
		  console.log(88888888888888)
	    } else {
	      // 新增
	      await goodAdd(data)
	      uni.showToast({ title: '添加成功', icon: 'success' })
		   console.log(9999999999999)
	    }
	    uni.navigateBack()
		 console.log(877777777777777)
	  } catch (e) {
	    uni.showToast({ title: '提交失败', icon: 'none' })
	  }
	}
	/* ---------- 生命周期 ---------- */
	onLoad((query) => {
	  // ② 解析 id（可能为空）
	  const rawId = query.id ? decodeURIComponent(query.id) : ''
	 
	  const id = rawId ? Number(rawId) : null
	  
	   gotId.value = id
	    console.log(123,gotId.value)
		 if (gotId.value) detail(gotId.value)
	  
	  // form.value.id = id
	
	  // if (id) {
	  //   uni.showLoading({ title: '加载中' })
	  //   loadDetail(id).finally(() => uni.hideLoading())
	  // }
	})
	onMounted(async() => {
	
	})


</script>

<style>
	.page {
		padding: 20rpx;
		background: #f6f7f9;
		min-height: 100vh;
	}

	.form {
		background: #fff;
		border-radius: 24rpx;
		padding: 30rpx;
	}

	.row {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.label {
		width: 200rpx;
		font-size: 30rpx;
		color: #333;
	}

	.input {
		flex: 1;
		padding: 20rpx;
		border: 1rpx solid #dcdfe6;
		border-radius: 12rpx;
		font-size: 30rpx;
	}

	.spec-txt {
		margin-left: 20rpx;
		font-size: 28rpx;
		color: #666;
	}

	.img-box {
		width: 160rpx;
		height: 160rpx;
		border: 1rpx dashed #c0c4cc;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.img {
		width: 100%;
		height: 100%;
	}

	.img-txt {
		font-size: 26rpx;
		color: #c0c4cc;
	}

	/* 脱离文本流的按钮 */
	.btn-fixed {
		position: fixed;
		bottom: 60rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 600rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		color: #fff;
		font-size: 32rpx;
		background: linear-gradient(135deg, #ff6034, #ee0a24);
		border-radius: 44rpx;
		box-shadow: 0 8rpx 20rpx rgba(238, 10, 36, 0.3);
	}
</style>